<template>
  <div>
    <section>
      <h5 class="tag" :id="topArtists.tag">{{topArtists.tag}}</h5>
      <ul v-for="item of topArtists.list" :key="item.id">
        <li>
          <div class="cover">
            <img v-lazy="item.img1v1Url" :alt="item.name">
          </div>
          <span>{{item.name}}</span>
        </li>
      </ul>
    </section>
    <section v-for="singer in artists" :key="singer.id">
      <h5 class="tag" :id="singer.tag">{{singer.tag}}</h5>
      <ul v-for="item of singer.list" :key="item.id">
        <li>
          <div class="cover">
            <img v-lazy="item.img1v1Url" :alt="item.name">
          </div>
          <span>{{item.name}}</span>
        </li>
      </ul>
    </section>
    <div class="index">
      <ul>
        <li v-for="artist of artists" :key="artist.id">
          <a :href="'#'+artist.tag" @click.prevent="scrollTo(artist.tag)">{{artist.tag}}</a>
        </li>
      </ul>
    </div>
  </div>
</template>
<script>
import { getTopArtists } from "@/api/singer"
import { buildTopArtists, buildArtistsList } from '@/assets/js/helper'
export default {
  name: "singer",
  data() {
    return {
      artists: {},
      topArtists: {}
    };
  },
  created() {
    this._getTopArtists();
  },
  methods: {
    _getTopArtists() {
      getTopArtists().then(res => {
        if (res.status == 200) {
          const list = res.data.artists;
          this.topArtists = buildTopArtists(list)
          this.artists = buildArtistsList(list)
          console.dir(this.artists)
        }
      });
    },
    scrollTo(id){
      // 这个索引跳转还很简陋，不过暂时用着吧，94这个数字是app-header加上app-tab的高度
      const tag = document.querySelector(`#${id}`).offsetTop - 94
      window.scrollTo(0, tag)
    }
  }
};
</script>
<style lang="scss" scoped>
@import "./../../assets/scss/variable";
@import "./style.scss";
</style>

